<template>
    <div class="top">
      <div class="wrap">
        <div class="location">
          <i class="icon-take icon-weizhi"></i>
          <span> 陕西省西安市雁塔区小寨</span>
          <i class="icon-take icon-jiantou"></i>
        </div>
        <div class="search" ref="search_bar">
          <input type="text" placeholder="搜索商家、商品名称">
        </div>
        <div class="search fixed" v-show="searchBarFixed">
          <input type="text" placeholder="搜索商家、商品名称">
        </div>
        <div class="tags">
             <span v-for="(tag,index) in tags" :key="index">
               <a href="tag.url">{{tag.name}}</a>
             </span>
              <a href="tag.url">小六汤包</a>
              <a href="tag.url">凉皮</a>
              <a href="tag.url">肉夹馍</a>
              <a href="tag.url">冰封</a>
              <a href="tag.url">胡辣汤</a>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      searchBarFixed: false
    }
  },
  // 组件切换时调用(确保keep-alive 组件激活,服务器端渲染期间不被调用)
  activated () {
    // console.log('gotop..')
    this.searchBarFixed = false
  },
  props: {
    tags: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrollHandle)
  },
  methods: {
    scrollHandle () {
      // var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var searchBar = this.$refs.search_bar
      if (!searchBar) return
      if (parseInt(searchBar.getBoundingClientRect().top) <= 0) {
        this.searchBarFixed = true
      } else {
        this.searchBarFixed = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  box-sizing: border-box;
  .wrap {
    padding: 1.1272rem 0.3623rem 0 0.3623rem;
    background-color: #00a6ff;
    .location {
      color: #fff;
      font-size: 0.4026rem;
      i {
        vertical-align: bottom;
        font-size: 0.4rem;
      }
    }
    .search {
      margin-top: 0.4026rem;
      text-align: center;
      input {
        width: 100%;
        height: 0.8857rem;
        text-align: center;
        outline: none;
        border: none;
        border-radius: 0.0403rem;
      }
      &.fixed {
        position: fixed;
        width: 100%;
        top: 0px;
        background: #00a6ff;
        left: 0;
        overflow: hidden;
        z-index: 999;
        padding: 0.2rem 0.373333rem;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
      }
    }
    .tags {
      margin-top: 0.4026rem;
      padding-bottom: 0.2415rem;
      white-space: nowrap;
      overflow-x: hidden;
      overflow-y: hidden;
      span {
        font-size: 0.2818rem;
        padding: 0 0.2818rem;
      }
      a {
        font-size: 0.2818rem;
        padding: 0 0.2818rem;
      }
    }
  }
}
</style>
